<!--
  @Descripttion:：学生咨询
  @Author：yejianbo
  @Date：2023年02月16日 08:53:23
-->
<template>
    <section class="iframePage" id="page">
        <HeaderCom />
        <div class="container" ref="container">
            <div class="left" id="leftMenu">
                <div class="row">
                    <div class="title">
                        <img src="../../assets/images/cultivate/menu.png" class="icon" />
                        {{ list.title }}
                    </div>
                    <div v-for="(it, i) in list.list" :key="i">
                        <div v-if="it.type !== 4" class="row_li" :class="it.url == url ? 'active' : ''" :key="i"
                            @click="openIframe2(it)">
                            <img v-if="it.icon" :src="require(`../../assets/images/cultivate/${it.url == url ? it.icon + '_active' : it.icon
                                }.png`)
                                " class="row_li_icon" :class="it.icon" />
                            {{ it.title }}
                        </div>
                        <div v-else-if="it.type === 4">
                            <div class="row_li mb10">
                                <img v-if="it.icon" :src="require(`../../assets/images/cultivate/${it.url == url ? it.icon + '_active' : it.icon
                                    }.png`)
                                    " class="row_li_icon" :class="it.icon" />
                                {{ it.title }}
                            </div>
                            <div v-for="(j, iIdx) in it.list" :class="[
                                'row_li',
                                'left_menu_sub_title',
                                j.url == url ? 'active' : '',
                                'mb10'
                            ]" @click="openIframe2(j)" :key="iIdx">
                                <img v-if="j.icon" :src="require(`../../assets/images/cultivate/${j.url == url ? j.icon + '_active' : j.icon
                                    }.png`)
                                    " class="row_li_icon" />
                                {{ j.title }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main" ref="main_bg">
                <div class="bannerBox">
                    <img :src="require(`../../assets/images/other/consultation.jpg`)" class="banner"
                        style="background-color: rgb(6, 74, 153)" />
                </div>
                <div class="flexBox" id="pageConten">
                    <div class="right">
                        <div class="right_title">学生咨询</div>
                        <div class="right_title_mobile">
                            <span :class="['tab_mobile', { 'current': currentIndex === 0 }]"
                                @click="currentIndex = 0">学生咨询</span>
                            <span :class="['tab_mobile', { 'current': currentIndex === 1 }]"
                                @click="currentIndex = 1">企业咨询</span>
                        </div>
                        <el-row :gutter="46">
                            <el-col :span="6" v-for="(item, index) in cardList" :key="index">
                                <Card :text="item.text" :online="item.online" :handleClick="item.handleClick" :key="index">
                                    <img style="width: 39px" :src="item.imgUrl" alt="" />
                                </Card>
                            </el-col>
                        </el-row>
                        <el-row :gutter="46" v-if="currentIndex === 0">
                            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                                <div class="vide-demo-btn btn1" @click="openModal(0)">
                                    <img class="btn-logo1" src="../../assets/images/consultation/student/s9.png" alt=""
                                        srcset="">
                                    <p class="btn-text1">AI 面试辅导演示视频</p>
                                    <img class="btn-logo2" src="../../assets/images/consultation/student/s12.png" alt=""
                                        srcset="">
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="right-btn">
                                <div class="vide-demo-btn btn2" @click="openModal(1)">
                                    <img class="btn-logo1" src="../../assets/images/consultation/student/s10.png" alt=""
                                        srcset="">
                                    <p class="btn-text2">AI 优化简历演示视频</p>
                                    <img class="btn-logo2" src="../../assets/images/consultation/student/s11.png" alt=""
                                        srcset="">
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
        <div class="mainFooter" id="pageFooter">
            <FooterMenu />
        </div>
        <video-modal :isVisible.sync="isModalVisible" :videoUrl="demoVideoUrl" />
        <privacy-policy-dialog
            :isVisible="dialogVisible"
            :iframeSrc="privateHtmlUrl"
            @confirm="handleConfirmPrivate"
            @update:isVisible="dialogVisible = $event"
        />
    </section>
</template>

<script>
import HeaderCom from "@/components/header/index.vue";
import FooterMenu from "@/components/footerMenu/index.vue";
import { mapState } from "vuex";
import Card from "./components/card.vue";
import VideoModal from './components/videoDialog.vue';
import { getOccupationGenerateSignature } from "../../request/api";
import PrivacyPolicyDialog from './components/privatePolicyDialog.vue';
export default {
    // 组件名称
    name: "studentPage",
    components: {
        HeaderCom,
        FooterMenu,
        Card,
        VideoModal,
        PrivacyPolicyDialog
    },
    // 组件状态值
    data() {
        return {
            userInfo: {},
            currentIndex: 0,
            url: "/studentConsultation",
            studentCardList: [
                {
                    text: "AI面试辅导",
                    imgUrl: require("../../assets/images/consultation/student/s1.png"),
                    handleClick: () => {
                        this.linkToAI(0)
                    }
                },
                {
                    text: "职业测评评估",
                    imgUrl: require("../../assets/images/consultation/student/s2.png"),
                    online: false,
                },
                {
                    text: "职业规划咨询",
                    imgUrl: require("../../assets/images/consultation/student/s3.png"),
                    online: false,
                },
                {
                    text: "专业技能培训",
                    imgUrl: require("../../assets/images/consultation/student/s4.png"),
                    online: false,
                },
                {
                    text: "AI优化简历",
                    imgUrl: require("../../assets/images/consultation/student/s5.png"),
                    handleClick: () => {
                        this.linkToAI(1)
                    }
                },

                {
                    text: "个人背景提升",
                    imgUrl: require("../../assets/images/consultation/student/s6.png"),
                    online: false,
                },
                {
                    text: "名企内推机会",
                    imgUrl: require("../../assets/images/consultation/student/s7.png"),
                    online: false,
                },
                {
                    text: "业界导师沙龙",
                    imgUrl: require("../../assets/images/consultation/student/s8.png"),
                    online: false,
                },
            ],
            companyCardList: [
                {
                    text: "优质人才甄选",
                    imgUrl: require("../../assets/images/consultation/company/1.png"),
                },
                {
                    text: "招聘流程优化",
                    imgUrl: require("../../assets/images/consultation/company/2.png"),
                },
                {
                    text: "品牌广告服务",
                    imgUrl: require("../../assets/images/consultation/company/3.png"),
                },
                {
                    text: "海量人才数据库",
                    imgUrl: require("../../assets/images/consultation/company/4.png"),
                },
                {
                    text: "HR精英训练营",
                    imgUrl: require("../../assets/images/consultation/company/5.png"),
                },
                {
                    text: "招聘研究",
                    imgUrl: require("../../assets/images/consultation/company/6.png"),
                },
                {
                    text: "人才潜质培训",
                    imgUrl: require("../../assets/images/consultation/company/7.png"),
                },
                {
                    text: "综合招聘解决方案",
                    imgUrl: require("../../assets/images/consultation/company/8.png"),
                },
            ],
            list: {
                title: "提供服务",
                list: [
                    {
                        title: "教育培训",
                        url: "provideTraining",
                        type: 1, //0:无背景图、无banner图  1：有背景图  2：有banner图 3：打开其他模块页面 4: 自定义多级菜单
                        icon: "blog",
                        bg_img: "provideTraining",
                    },
                    {
                        title: "实践项目",
                        url: "/productManage",
                        type: 3,
                        icon: "subject",
                        bg_img: "",
                    },
                    {
                        title: "研究成果",
                        url: "/researchResult",
                        type: 3,
                        icon: "research",
                        bg_img: "",
                    },
                    {
                        title: "前沿资讯",
                        url: "/newsAction",
                        type: 3,
                        icon: "news",
                        bg_img: "",
                    },
                    {
                        title: "规划咨询",
                        type: 4,
                        url: "/studentConsultation",
                        icon: 'guihua',
                        list: [
                            {
                                title: "学生咨询",
                                url: "/studentConsultation",
                                type: 4,
                                icon: "student",
                                banner: "studentConsultation",
                                bg_style: "background-color: rgb(6,74,153);",
                            },
                            {
                                title: "企业咨询",
                                url: "/companyConsultation",
                                type: 4,
                                icon: "company",
                                banner: "companyConsultation",
                                bg_style: "background-color: rgb(6,74,153);",
                            },
                        ],
                    },
                    {
                        title: "海外服务",
                        url: "overseaServices",
                        type: 1,
                        icon: "archive",
                        bg_img: "overseaService",
                    },
                ],
            },
            isModalVisible: false,
            aiVideoBtnType: 0, // 0 模拟面试 1 ai简历
            aiEntryBtnType: 0, // 0 模拟面试 1 ai简历
            aijianliVideoUrl: 'https://demo-oss.oss-cn-beijing.aliyuncs.com/aijianli-20241113082047570.mp4',
            aimonimianshiVideoUrl: 'https://demo-oss.oss-cn-beijing.aliyuncs.com/aimianshi-202411130818568869.mp4',
            dialogVisible: false,
            privateHtmlUrl: ''
        };
    },
    watch: {
        // '$route': function(oldValue,newValue){
        //   this.init()
        // }
        $route(to) {
            // 监听路由是否变化
            if (to.query.url !== this.url && to.name === "cultivate") {
                location.reload(); // 这个是刷新整个页面，会闪一下。
            }
        },
        USER_INFO: function (newValue) {
            this.userInfo = newValue;
        },
    },
    mounted() {
        let pageEl = document.getElementById("page");
        pageEl.addEventListener("scroll", this.menuHidden);
        window.addEventListener("message", this.dealMessage, false);
    },
    computed: {
        ...mapState(["USER_INFO", "userMobile"]),
        cardList() {
            return this.currentIndex === 0 ? this.studentCardList : this.companyCardList
        },
        demoVideoUrl() {
            // aiVideoBtnType: 0, // 0 模拟面试 1 ai简历
            return this.aiVideoBtnType === 0 ? this.aimonimianshiVideoUrl : this.aijianliVideoUrl
        }
    },
    beforeDestory() {
        let pageEl = document.getElementById("page");
        pageEl.removeEventListener("scroll", this.menuHidden);
        window.removeEventListener("message", this.dealMessage);
    },
    // 组件方法
    methods: {
        isMobile() {
            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
            return /android|iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
        },
        handleConfirmPrivate() {
            getOccupationGenerateSignature({
                "mobile": this.userInfo.mobile,
                "studentName": this.userInfo.studentName
            }).then(res => {
                if (res && res.data) {
                    const { secretId, fromValue } = res.data;
                    if (secretId && fromValue) {
                        // aiEntryBtnType: 0, // 0 模拟面试 1 ai简历
                        const routeName = this.aiEntryBtnType === 0 ? 'interviewHome' : 'aiResumeIndex'
                        const urlStr = `https://portal.jiuyexing.com/#/login?collegeId=${secretId}&from=${fromValue}&pathName=${routeName}`
                        window.open(urlStr, '_blank')
                    } else {
                        this.$message.warning('系统异常，请稍后重试～')
                    }
                }
            })
        },
        linkToAI(aiEntryBtnType) {
            this.aiEntryBtnType = aiEntryBtnType
            if (
                !this.userMobile 
            ) {
                this.$message.error({ message: "请先登录", duration: 1000 });
                this.$router.push({ name: "login" });
                return;
            }
            if (this.isMobile()) {
                this.$message.warning('请使用电脑端进行操作')
                return
            }
            if (this.userInfo.status != 1 && this.userInfo.status != 2) {
                this.$message.warning('请完成认证')
                this.$router.push({ name: "auditId" });
                return
            }
            const base =
            process.env.NODE_ENV === "production" ||
            process.env.NODE_ENV === "local"
                ? "/"
                : "/test/";
            this.privateHtmlUrl =
            base +
            `static/AiPrivatePolicy.html?random=${
                new Date().getTime() + Math.floor(Math.random() * 1000000)
            }`;
            this.dialogVisible = true
        },
        openModal(type) {
            if (this.isMobile()) {
                this.$message.warning('请使用电脑端进行操作')
                return
            }
            this.aiVideoBtnType = type
            this.isModalVisible = true;
        },
        dealMessage(e) {
            console.log(e.data);
            if (e.data === "openCase") {
                this.$router.push({ path: "/otherServices?type=3" });
            }
        },
        menuHidden() {
            let leftMenu = document.getElementById("leftMenu");
            let footEl = document.getElementById("pageFooter");
            let cb =
                window.innerHeight -
                leftMenu.getBoundingClientRect().y -
                leftMenu.getBoundingClientRect().height;
            let footElCb = window.innerHeight - footEl.getBoundingClientRect().y;
            if (footElCb >= cb) {
                leftMenu.style = "opacity: 0";
            } else {
                leftMenu.style = "opacity: 1";
            }
        },
        openIframe2(item) {
            if (item.type === 3 || item.type === 4) {
                if (item.url) {
                    this.$router.push({ path: item.url });
                } else {
                    this.$message.info("模块开发中，即将上线，敬请期待");
                }
                return;
            }
            let { url } = item;
            this.$router.push({
                name: "cultivate",
                query: { type: item.type, url },
            });
        },
        scrollToTop() {
            setTimeout(() => {
                document.getElementById("page").scrollIntoView(true);
            }, 0);
        },
    },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.iframePage {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    padding-top: 80px;
    display: flex;
    flex-wrap: wrap;

    .container {
        width: 100%;
        // height: calc(100% - 352px - 80px);
        // overflow-y: scroll;
        // position: relative;
        // min-height: 700px;
    }

    .main {
        flex: 1;
        position: relative;

        .bannerBox {
            width: 100%;
            position: relative;
            height: 350px;
            overflow-x: hidden;

            .banner {
                width: 100%;
                -o-object-fit: contain;
                object-fit: contain;
                height: 350px;
                display: block;
                min-width: 1920px;
                // background-color: #afc0dd;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                z-index: 2;
            }
        }

        // .left_banner{
        //   // top: -250px !important;
        //   // left: -70px !important;
        //   left: calc(( 100% - 1200px ) / 2 - 70px) !important;
        // }
    }

    .bg_img {
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
    }

    .main_bg {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 80px;
        z-index: 2;
    }

    .mainFooter {
        width: 100%;
        flex: 0 0 auto;
        display: flex;
        align-items: flex-end;
        z-index: 3;
    }

    .page {
        position: relative;
        width: 100%;
        display: block;
        margin: 0 auto;
    }

    .left {
        width: 240px;
        position: fixed;
        left: calc((100% - 1200px) / 2 - 70px);
        top: 160px;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.18);
        padding-top: 48px;
        padding-left: 20px;
        background: #fff;
        border-radius: 8px;
        transition: all 0.6s;
        opacity: 1;
        z-index: 5;

        .row {
            width: 100%;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383d;
            line-height: 21px;
            // height: 52px;
            transition-duration: 0.3s;
            overflow-y: hidden;

            &:hover {
                height: auto;

                .title {
                    border-bottom: 1px solid #d4d6da;

                    .icon2 {
                        transform: rotate(90deg);
                    }
                }
            }

            .title {
                margin-bottom: 35px;
                padding-left: 40px;
                padding-bottom: 30px;
                position: relative;
                border-bottom: 1px solid #d4d6da;

                .icon {
                    position: absolute;
                    left: 0;
                    top: 0;
                    max-width: 20px;
                }

                .icon2 {
                    position: absolute;
                    right: 20px;
                    height: 20px;
                    transition-duration: 0.3s;
                    top: 0;
                }
            }

            .row_li {
                width: calc(100% - 20px);
                padding-left: 44px;
                cursor: pointer;
                height: 44px;
                position: relative;
                margin-bottom: 38px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                transition-duration: 0.3s;

                .row_li_icon {
                    position: absolute;
                    left: 13px;
                    top: 50%;
                    transform: translateY(-50%);
                    max-width: 20px;

                    &.tags5 {
                        max-width: 25px;
                        left: 10px;
                    }
                }

                &:hover,
                &.active {
                    color: #15539a;
                    background: #e1f2fd;
                    font-size: 16px;
                    font-weight: 600;
                    // border: 1px solid #daebff;
                }
            }

            .left_menu_title {
                width: calc(100% - 20px);
                padding-left: 14px;
                cursor: normal;
                height: 44px;
                position: relative;
                margin-bottom: 18px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                transition-duration: 0.3s;
            }

            .left_menu_sub_title {
                padding-left: 60px;

                .row_li_icon {
                    position: absolute;
                    left: 33px;
                    top: 50%;
                    transform: translateY(-50%);
                    max-width: 20px;

                    &.tags5 {
                        max-width: 25px;
                        left: 10px;
                    }
                }
            }
        }
    }

    .flexBox {
        width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-flow: row nowrap;
        position: relative;
        padding-left: 180px;
        z-index: 2;

        // .rows{
        //   flex: 1;
        //   width: 100%;
        // }
        .right {
            width: 100%;
            overflow: hidden;

            .right_title {
                position: relative;
                padding-left: 20px;
                font-size: 19px;
                font-family: Alibaba PuHuiTi 2;
                font-weight: normal;
                color: #000000;
                line-height: 30px;
                margin: 50px 0 30px;

                &:before {
                    content: "";
                    display: block;
                    width: 8px;
                    height: 19px;
                    background: #15539a;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            .right_title_mobile {
                position: relative;
                display: none;
                padding-left: 20px;
                font-size: 19px;
                font-family: Alibaba PuHuiTi 2;
                font-weight: normal;
                color: #000000;
                line-height: 30px;
                margin: 50px 0 30px;

                &:before {
                    content: "";
                    display: block;
                    width: 8px;
                    height: 19px;
                    background: #15539a;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }

                span {
                    font-size: 16px;
                    color: #b5afaf;
                    margin: 0 10px;
                }

                .current {
                    font-size: 19px;
                    color: #000;
                    margin: 0 10px;
                }
            }
        }
    }
}

@media screen and (max-height: 820px) {
    .row_li {
        margin-bottom: 10px !important;
    }

    .iframePage .left {
        padding-top: 20px !important;
    }

    .iframePage .left .row .title {
        margin-bottom: 10px !important;
    }
}

@media screen and (max-width: 750px) {
    .iframePage {
        padding-top: 0.54rem;
        overflow-y: overlay;

        .bannerBox {
            display: none;
        }

        .container {
            padding: 0.15rem;
            padding-bottom: 0;
        }

        .left {
            display: none;
        }

        .flexBox {
            padding-left: 0;
            width: 100%;

            .right {
                .right_title {
                    display: none;
                    margin-top: 0;
                    margin-bottom: 0.2rem;
                    padding-left: 0.2rem;
                    font-size: 0.19rem;
                    line-height: 0.3rem;
                }

                .right_title_mobile {
                    display: block;
                    margin-top: 0;
                    margin-bottom: 0.2rem;
                    padding-left: 0.2rem;
                    font-size: 0.19rem;
                    line-height: 0.3rem;
                }
            }
        }

        .el-row {
            display: flex;
            flex-wrap: wrap;

            .el-col {
                padding: 0 0.22rem !important;
                width: 50%;

                &:nth-child(2n - 1) {
                    padding-right: 0.11rem !important;
                }

                &:nth-child(2n - 2) {
                    padding-left: 0.11rem !important;
                }
            }

            .card-com {
                margin-bottom: 0.22rem;
                width: auto;

                ::v-deep .text {
                    margin-top: 0.14rem;
                    font-size: 0.16rem;
                    line-height: 0.31rem;
                }
            }
        }
    }
}

.mb10 {
    margin-bottom: 10px !important;
}

.vide-demo-btn {
    position: relative;
    width: 100%;
    height: 104px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 60px;
    cursor: pointer;

    .btn-logo1 {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: 24px;
        margin-left: 32px;
    }

    .btn-text1 {
        font-weight: 400;
        font-size: 20px;
        color: #056DE8;
        line-height: 20px;
    }

    .btn-text2 {
        font-weight: 400;
        font-size: 20px;
        color: #F5831A;
        line-height: 20px;
    }

    .btn-logo2 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100%;
    }

    &.btn1 {
        background: #F3F7FE;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #C7E0FF;
    }

    &.btn2 {
        background: #FFF9F5;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #FFD1A7;
    }
}
@media screen and (max-width: 750px) {
    .btn-text1 {
        font-size: 14px !important;
        line-height: 14px;
    }

    .btn-text2 {
        font-size: 14px !important;
        line-height: 14px;
    }
}
.right-btn {
    margin-left: 0px;
}
</style>
